<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-条件渲染-实例</title>
</head>
<body>
<div id="app">

    <div v-if="isShow">
        hello
    </div>
    <div>
        <button @click="btnShowClick">显示</button>
        <button @click="btnHideClick">隐藏</button>
        <button @click="btnToggleClick">切换</button>
    </div>

</div>
</body>
<script src="../../lib/vue.js"></script>
<script>

    /**
     * 数据驱动
     *   数据变化
     *      相关dom的渲染/重新渲染
     * */
    new Vue({
        el:'#app',
        data:{
            isShow:false
        },
        methods:{
            btnShowClick:function () {
                this.isShow=true;
            },
            btnHideClick:function () {
                this.isShow=false;
            },btnToggleClick:function () {
                this.isShow=!this.isShow;
            }
        }
    })

</script>

</html>